import React from 'react';

import SearchTable from '@/components/common/SearchTable';
import { connect } from 'dva';
import MaskText from '@/components/MaskText';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  loading: state.loading.effects['vehicleInfo/getFetchPage'],
}))
export default class HistoryTab extends React.Component<any, any> {
  onSource = (page, size, args) =>
    new Promise(async resolve => {
      const { vehicleInfo } = this.props;

      const res = await this.props.dispatch({
        type: 'vehicleInfo/getFetchPage',
        payload: {
          url: '/simcard/simcardswappage',
          // vin: 'LGJE5EE07LDL59001',
          vin: vehicleInfo.vin,
          current: page,
          pageSize: size,
          ...args,
        },
      });
      if (res && res.statusCode === '0') {
        resolve({
          total: res.data.pagination.total,
          data: res.data.list,
        });
      } else {
        resolve({
          total: 0,
          data: [],
        });
      }
    });

  // columns = [
  //   {
  //     title: 'NO',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '换件时间',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '原SIM卡编号',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '原ICCID',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '原MSISDN',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '原IMSI',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '新SIM卡编号',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '新ICCID',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '新MSISDN',
  //     dataIndex: '',
  //   },
  //   {
  //     title: '新IMSI',
  //     dataIndex: '',
  //   },
  // ];
  render() {
    const {
      vehicleInfo: {
        pageData: { pagination },
      },
    } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        render: (text: any, record: any, index: any) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: '换件时间',
        dataIndex: 'createTime',
      },
      {
        title: '原SIM卡编号',
        dataIndex: 'oldMsidsn',
        render(val: any) {
          return <MaskText text={val} type="simCard" />;
        },
      },
      {
        title: '原ICCID',
        dataIndex: 'oldIccid',
      },
      // {
      //   title: '原MSISDN',
      //   dataIndex: '',
      // },
      {
        title: '原IMSI',
        dataIndex: 'oldImsi',
      },
      {
        title: '新SIM卡编号',
        dataIndex: 'newMsidsn',
        render(val: any) {
          return <MaskText text={val} type="simCard" />;
        },
      },
      {
        title: '新ICCID',
        dataIndex: 'newIccid',
      },
      // {
      //   title: '新MSISDN',
      //   dataIndex: '',
      // },
      {
        title: '新IMSI',
        dataIndex: 'newImsi',
      },
    ];
    return (
      <>
        <SearchTable
          tableProps={{
            scroll: { x: true },
            columns: columns,
            onSource: this.onSource,
          }}
        />
      </>
    );
  }
}
